<template>

	<view class="index">
		<view id="header">
			<page-header backText="返回" showBack='true' :title="topTitle"></page-header>
			<scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
				<block v-for="(tab,index) in tabs" :key="tab.id">
					<view :class="['swiper-tab-list',currentTab==index ? 'on' : '']" :id="tab.id" :data-current="index" @tap="swichNav">{{tab.name}}</view>
				</block>
			</scroll-view>
		</view>
		<swiper :current="currentTab" class="swiper-box" :style="{height:h}" duration="300" @change="bindChange">
			<block v-for="(tab,index1) in newsitems" :key="index1">
				<swiper-item>
					<scroll-view class="index-bd" scroll-y @scrolltolower="loadMore(index1)">
						<block v-for="(newsitem,index2) in tab" :key="index2">
							<view class="item">
								<view class="item_top">
									<view class="item_img">
										<image src="../../static/image/feileiliebiao_zhanweitu.png"></image>
									</view>
									<view class="item_content">
										<view class="title">欧美式现代简约可拆可洗客厅整装智能沙发自由组合系列...</view>
										<view class="specifications">
											<view>规格：1+3+妃</view>
											<view>颜色：红</view>
											<view>方向：右</view>
										</view>
										<view class="bott">
											<view class="price">￥966.00</view>
											<view class="number">x12</view>
										</view>
									</view>
								</view>
								<view class="item_boot">
									<view class="timer">2018-08-16 12:00</view>
									<view class="btn">已生产</view>
								</view>
							</view>


							<!-- <view class="tab-list">{{newsitem.name}}-{{newsitem.label}}</view> -->
						</block>
					</scroll-view>
				</swiper-item>
			</block>
		</swiper>
	</view>


</template>

<script>
	import pageHeader from "../../components/pageHeader.vue"
	export default {
		data() {
			return {
				topTitle: "",
				title: 'tabbar',
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				h: 1000,
				tabs: [{
					name: '全部',
					id: 'guanzhu'
				}, {
					name: '已确认',
					id: 'tuijian'
				}, {
					name: '已生产',
					id: 'tiyu'
				}, {
					name: '已入库',
					id: 'redian'
				}, {
					name: '已发货',
					id: 'fahuo'
				}],
				newsitems: []
			}
		},
		onLoad: function (option) {
			let el = new Promise((ret, err) => {
				uni.createSelectorQuery().select("#header").fields({
					size: true
				},(data)=>{
					ret(data)
					console.log(data)
				}).exec()
			})
			.then(data =>{
				this.h = data.height;
				this.h = uni.getSystemInfoSync().windowHeight - this.h
			})
			this.newsitems = this.randomfn()
			this.topTitle = option.title;
	},
	onUnload: function (option) {
			this.scrollLeft = 0,
				this.isClickChange = false,
				this.currentTab = 0;
		},
		methods: {
			bindChange: async function (e) {
				let index = e.target.current;
				if (this.isClickChange) {
					this.currentTab = index;
					this.isClickChange = false;
					return;
				}
				let tabBar = await this.getWidth("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;

				for (let i = 0; i < index; i++) {
					let result = await this.getWidth(this.tabs[i].id);
					width += result.width;
				}

				let winWidth = uni.getSystemInfoSync().windowWidth,
					nowElement = await this.getWidth(this.tabs[index].id),
					nowWidth = nowElement.width;

				if (width + nowWidth - tabBarScrollLeft > winWidth) {
					this.scrollLeft = width + nowWidth - winWidth;
				}
				if (width < tabBarScrollLeft) {
					this.scrollLeft = width;
				}
				this.isClickChange = false;
				this.currentTab = index; //一旦访问data就会出问题
			},
			getWidth: function (id) { //得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select("#" + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						if (id === 'tab-bar') {
							console.log("id=", id, "数据:", data)
						}
						res(data);
					}).exec();
				})
			},
			swichNav: async function (e) { //点击tab-bar,
				if (this.currentTab === e.target.dataset.current) {
					return false;
				} else {
					let tabBar = await this.getWidth("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.currentTab = e.target.dataset.current
				}
			},
			loadMore: function (e) {
				let last = this.newsitems[e][this.newsitems[e].length - 1].label,
					name = this.newsitems[e][this.newsitems[e].length - 1].name;
				for (let i = 1; i <= 10; i++) {
					this.newsitems[e].push({
						name: name,
						label: i + last
					});
				}
			},
			randomfn() {
				let ary = [];
				for (let i = 0, length = this.tabs.length; i < length; i++) {
					let aryItem = [];
					for (let j = 1; j <= 20; j++) {
						aryItem.push({
							name: this.tabs[i].name,
							label: j
						});
					}
					ary.push(aryItem);
				}
				return ary;
			}
		},
		components: {
			pageHeader
		}
	}
</script>

<style>
	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100%;
	}

	.index-bd {
		width: 750px;
		height: 100%;
	}

	.swiper-tab {
		width: 100%;
		white-space: nowrap;
		line-height: 64px;
		height: 70px;
		background-color: #fff;
	}


	.swiper-tab-list {
		font-size: 30px;
		width: 150px;
		display: inline-block;
		text-align: center;
		color: #777777;
	}

	.on {
		color: #FF0000;
		border-bottom: 5px solid #FF0000;
	}

	.swiper-box {
		flex: 1;
		width: 100%;
		height: 100%;
	}

	.on {
		color: #FF0000;
		border-bottom: 5px solid #FF0000;
	}

	.tab-list {
		width: 100%;
		height: 90px;
		line-height: 90px;
		text-align: left;
		border-bottom: 2px solid #EFEFF4;
	}

	#tab-bar {
		position: relative;
	}

	#tab-bar:after {
		display: block;
		content: '';
		height: 1px;
		background: #ccc;
		transform: scaleY(.5);
		position: absolute;
		top: 0;
		left: 0;
	}

	.item_img image {
		width: 160px;
		height: 160px;
	}

	.item {
		background-color: #ffffff;
		margin-top: 20px
	}

	.item_top {
		display: flex;
		justify-content: space-between;
		padding: 20px 25px;
		border: 1px solid #f4f4f4
	}

	.item_content {
		width: 520px;
	}

	.title {
		font-size: 30px;
		color: #111
	}

	.specifications {
		font-size: 22px;
		color: #666;
		display: flex;
		justify-content: flex-start;
	}

	.specifications>view {
		margin-right: 35px
	}

	.bott {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.price {
		color: #000;
		font-size: 32px
	}

	.number {
		color: #666;
		font-size: 18px
	}

	.timer {
		font-size: 22px;
		color: #999
	}

	.item_boot {
		display: flex;
		justify-content: space-between;
		height: 84px;
		align-items: center;
		padding: 0 25px
	}

	.btn {
		background-color: #f8a24d;
		width: 120px;
		height: 46px;
		border-radius: 15px;
		text-align: center;
		line-height: 46px;
		color: #fff;
		font-size: 26px
	}
</style>
